<template>
  <div class="container">
    <div class="uni-forms-box">
      <div class="uni-forms-box-form">
        <uni-forms
          ref="form"
          :modelValue="form"
          :rules="rules"
          label-width="100px"
          label-align="left"
        >
          <div v-if="userInfo.role === 1">
            <!-- 内科 -->
            <uni-forms-item label="内科" name="name">
              <radio-group @change="radioChange" class="radio-group">
                <label
                  v-for="(item, index) in internalDisList"
                  :key="item.value"
                >
                  <radio :value="item.value" :checked="index === current" />
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </uni-forms-item>
          </div>
          <!-- 外科/五官科 -->
          <uni-forms-item label="外科/五官科" name="name">
            <radio-group @change="radioChange" class="radio-group">
              <label v-for="(item, index) in surgeryList" :key="item.value">
                <radio :value="item.value" :checked="index === current" />
                <view>{{ item.name }}</view>
              </label>
            </radio-group>
          </uni-forms-item>
          <!-- 视力 -->
          <uni-forms-item label="左眼视力" name="cardNo">
            <picker
              @change="bindPickerChange"
              :value="index"
              :range="visionList"
              :range-key="'name'"
              class="uni-picker-input"
            >
              <view class="uni-input">{{ visionList[index].name }}</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item label="右眼视力" name="cardNo">
            <picker
              @change="bindPickerChange"
              :value="index"
              :range="visionList"
              :range-key="'name'"
              class="uni-picker-input"
            >
              <view class="uni-input">{{ visionList[index].name }}</view>
            </picker>
          </uni-forms-item>
          <div v-if="userInfo.role === 1">
            <!-- 辨色力 -->
            <uni-forms-item label="辨色力" name="cardNo">
              <uni-easyinput
                type="text"
                v-model="form.cardNo"
                placeholder="未见异常"
              />
            </uni-forms-item>
          </div>
          <!-- 身高体重胸围 -->
          <uni-forms-item label="身高(cm)" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="体重(kg)" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="胸围(cm)" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <!-- 血压脉搏 -->
          <uni-forms-item label="收缩压(mmHg)" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="舒张压(mmHg)" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="脉搏(次/分)" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <!-- 采血 -->
          <uni-forms-item label="采血" name="name">
            <radio-group @change="radioChange" class="radio-group">
              <label v-for="(item, index) in bloodList" :key="item.value">
                <radio :value="item.value" :checked="index === current" />
                <view>{{ item.name }}</view>
              </label>
            </radio-group>
          </uni-forms-item>
          <!-- 放射线 -->
          <uni-forms-item label="放射线" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="肺膈未见异常"
            />
          </uni-forms-item>

          <div v-if="userInfo.role === 2">
            <!-- 心电 -->
            <uni-forms-item label="心电" name="name">
              <radio-group @change="radioChange" class="radio-group">
                <label v-for="(item, index) in stateList" :key="item.value">
                  <radio :value="item.value" :checked="index === current" />
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </uni-forms-item>
            <!-- 彩超 -->
            <uni-forms-item label="彩超" name="name">
              <radio-group @change="radioChange" class="radio-group">
                <label v-for="(item, index) in stateList" :key="item.value">
                  <radio :value="item.value" :checked="index === current" />
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </uni-forms-item>
            <!-- 妇科 -->
            <uni-forms-item label="妇科" name="name">
              <radio-group @change="radioChange" class="radio-group">
                <label v-for="(item, index) in stateList" :key="item.value">
                  <radio :value="item.value" :checked="index === current" />
                  <view>{{ item.name }}</view>
                </label>
              </radio-group>
            </uni-forms-item>
          </div>
        </uni-forms>
      </div>
    </div>
    <div class="submit-bottom">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        // 角色
        role: 2, // 1 学生 2 教职员工
      },
      // 表单参数
      form: {
        admin: "1",
      },
      // 表单校验
      rules: {},
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: "10%",
        },
      },
      // 检查项目类型
      // 1 内科
      // 2 外科/五官科
      // 3 视力
      // 4 辨色力
      // 5 身高体重胸围
      // 6 血压脉搏
      // 7 采血
      // 8 放射线
      // 9 心电
      // 10 彩超
      // 11 妇科
      projectType: undefined,
      // 内科疾病选项
      internalDisList: [
        {
          name: "未见异常",
          value: 1,
        },
        {
          name: "窦性心律不齐",
          value: 2,
        },
        {
          name: "期前收缩",
          value: 3,
        },
        {
          name: "心房颤动",
          value: 4,
        },
        {
          name: "心音异常",
          value: 5,
        },
        {
          name: "可闻及杂音",
          value: 6,
        },
        {
          name: "有心包摩擦音",
          value: 7,
        },
        {
          name: "其他",
          value: 8,
        },
      ],
      // 外科科/五官科选项
      surgeryList: [
        {
          name: "未见异常",
          value: 1,
        },
        {
          name: "肢体关节异常",
          value: 2,
        },
        {
          name: "运动异常",
          value: 3,
        },
        {
          name: "五官缺陷",
          value: 4,
        },
        {
          name: "听力异常",
          value: 5,
        },
        {
          name: "残疾",
          value: 6,
        },
        {
          name: "其他",
          value: 7,
        },
      ],
      // 视力选项
      visionList: [
        {
          name: "4.0",
          value: "4.0",
        },
        {
          name: "4.1",
          value: "4.1",
        },
        {
          name: "4.2",
          value: "4.2",
        },
        {
          name: "4.3",
          value: "4.3",
        },
        {
          name: "4.4",
          value: "4.4",
        },
        {
          name: "4.5",
          value: "4.5",
        },
        {
          name: "4.6",
          value: "4.6",
        },
        {
          name: "4.7",
          value: "4.7",
        },
        {
          name: "4.8",
          value: "4.8",
        },
        {
          name: "4.9",
          value: "4.9",
        },
        {
          name: "5.0",
          value: "5.0",
        },
        {
          name: "5.1",
          value: "5.1",
        },
        {
          name: "5.2",
          value: "5.2",
        },
        {
          name: "5.3",
          value: "5.3",
        },
      ],
      // 采血选项
      bloodList: [
        {
          name: "已采",
          value: 1,
        },
        {
          name: "未采",
          value: 2,
        },
      ],
      // 心电选项
      stateList: [
        {
          name: "已检",
          value: 1,
        },
        {
          name: "未检",
          value: 2,
        },
      ],
      // 是否复查
      isReview: [
        {
          name: "是",
          value: 0,
        },
        {
          name: "否",
          value: 1,
        },
      ],
      index: 0,
      current: 0,
      isConfirm: false,
    };
  },
  computed: {},
  onLoad(args) {},
  methods: {
    bindPickerChange(e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      this.index = e.detail.value;
    },
    change(e) {
      console.log(e);
      console.log(form.userPhone);
    },
    radioChange: function (evt) {
      for (let i = 0; i < this.internalDisList.length; i++) {
        if (this.internalDisList[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
      this.role = evt.detail.value;
      this.isRole = this.role ? true : false;
      console.log(this.isRole);
      console.log(this.role);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
.uni-forms-box {
  padding: 20px;
  background-color: #fff;
}
.submit-bottom {
  z-index: 100;
  position: fixed;
  bottom: 0%;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px 0;
  button {
    background-color: #0d7cff;
    color: #fff;
    margin: 0 1.25rem;
  }
}
::v-deep .icon-add {
  width: 25px !important;
}
::v-deep .uni-forms-item .is-direction-left {
  align-items: center !important;
}
.uni-picker-input {
  border: 1px solid rgb(240, 240, 240);
  line-height: 30px;
  padding-left: 10px;
}
.radio-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 1px;

  label {
    flex: 1;
    margin: 4px 0;
    min-width: fit-content;
    display: flex;
    padding: 0 6px;
    view {
      font-size: 12px;
      line-height: 24px;
      align-content: center;
    }
  }
}
.isConfirm {
  padding-left: 18%;
}
.uni-forms-box-form {
  margin-bottom: 5rem;
}
</style>